<template>
  <div>
      <h1 class="h1">我是测试组件内守卫</h1>
      <p>name: {{$route.query.name}}</p>
      <p>data中的name：{{name}}</p>
      <div>
          <input type="text" v-model="name">
          <router-link :to="`/inner?name=${name}`">去往组件内守卫测试页面</router-link>
      </div>
      <button @click="handleExit">离开</button>
  </div>
</template>

<script>
export default {
    name: "InnerGuarder",
    data() {
        return {
            name: ""
        }
    },
    methods: {
        handleExit() {
            this.$router.go(-1);
        }
    },
    // 组件内前置守卫，在vue对象创建之前调用，此时没有vue对象
    // 如果要使用当前组件的vue对象，那么要在next函数的第一个回调函数的参数中使用
    beforeRouterEnter(to, from, next) {
        let name = to.query.name;
        next(vm => {
            vm.name = name;
            // 通过name发起异步请求，查询数据
        })
    },
    // 组件更新守卫
    beforeRouteUpdate(to, from, next) {
        console.log("触发路由更新！");
         // 通过name发起异步请求，查询数据
        next();
    },
    // 组件离开守卫
    beforeRouteLeave (to, from, next) {
        const answer = window.confirm('是否离开当前页面')
        if (answer) {
            next()
        } else {
            next(false)
        }
    }
}
</script>

<style scoped>
    .h1 {
        color: #875533;
    }

</style>
